<template>
    <div class="com-container" @dblclick="revertMap">
        <div class="com-chart" ref="map_ref">
            <h1>map</h1>
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import {
    onMounted,
    ref,
    onUnmounted,
    inject,
    defineExpose,
    computed,
    watch,
} from "vue";
//vuex
import { useStore } from "vuex";
const store = useStore();
import * as echarts from "echarts";
import { getProvinceMapInfo } from "@/utils/map_utils";
import SocketService from "./../utils/socket_service";
const map_ref = ref(null);
let chartInstance = null;
let allData = ref(null);
let mapData = {};
//初始化
const initChart = async () => {
    //挂载chart
    chartInstance = echarts.init(map_ref.value, theme.value);
    //获取数据 中国地图矢量数据
    const result = await axios.get(
        "http://localhost:8080/static/map/china.json"
    );
    console.log(result);
    //注册地图
    echarts.registerMap("china", result.data);
    /** @type EChartsOption */
    const initOption = {
        title: {
            text: "| 商家分布",
            left: 20,
            top: 20,
        },
        geo: {
            // echarts-disable-next-line
            type: "map",
            map: "china",
            top: "5%",
            bottom: "5%",
            itemStyle: {
                areaColor: "#2E72BF",
                borderColor: "#333",
            },
        },
        legend: {
            left: "5%",
            bottom: "5%",
            orient: "vertice", //图例竖直排列
        },
    };
    chartInstance.setOption(initOption);
    //点击监听放大地图
    chartInstance.on("click", async (e) => {
        console.log("clicked", e.name);
        const provinceInfo = getProvinceMapInfo(e.name);
        console.log(provinceInfo);
        //判断mapData有无省份数据
        if (!mapData[provinceInfo.key]) {
            const result = await axios.get(
                `http://localhost:8080${provinceInfo.path}`
            );
            mapData[provinceInfo.key] = result.data;
            console.log("@@@", result);
            echarts.registerMap(provinceInfo.key, result.data);
        }
        const chageOption = {
            geo: {
                map: provinceInfo.key,
            },
        };
        chartInstance.setOption(chageOption);
    });
};

//获取数据
const getData = async (ret) => {
    // 获取数据
    // const { data: ret } = await inject("http").get("/api/map"); //散点图
    allData.value = ret;
    console.log("allData", allData);
    upDataChart();
};

//获取数据
const upDataChart = () => {
    //处理数据
    const seriesArr = allData.value.map((item) => {
        //散点坐标
        return {
            /** @type EChartsOption */
            type: "effectScatter", //动效
            //涟漪 效果 变大
            rippleEffect: {
                scale: 5,
                brushType: "stroke", //空心效果
            },
            name: item.name,
            data: item.children,
            coordinateSystem: "geo", // 散点使用地图坐标
        };
    });
    //图例设置
    const legendArr = allData.value.map((item) => {
        return item.name;
    });
    //分辨率适配
    /** @type EChartsOption */
    const dataOption = {
        series: seriesArr,
        legend: {
            data: legendArr,
        },
    };
    chartInstance.setOption(dataOption);
};
// 响应式适配
const screenAdapt = () => {
    //标题文字
    const titleFontSize = map_ref.value.offsetWidth * (66 / 1536);
    console.log(titleFontSize);
    /** @type EChartsOption */
    const adaptOption = {
        title: {
            textStyle: {
                fontSize: titleFontSize,
            },
        },
        legend: {
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 4, // 图例间隔
            textStyle: {
                fontSize: titleFontSize / 2,
            },
        },
    };
    chartInstance.setOption(adaptOption);
    chartInstance.resize();
};
//回到中国地图
const revertMap = () => {
    const revertOption = {
        geo: {
            map: "china",
        },
    };
    chartInstance.setOption(revertOption);
};

// 回调函数注册
inject("SocketService").registerCallBack("mapData", getData);
onUnmounted(() => {
    inject("SocketService"), unRegisterCallBack("mapData");
});

//挂载
onMounted(() => {
    initChart();
    // getData();
    inject("SocketService").send({
        action: "getData",
        socketType: "mapData",
        chartName: "map",
        value: "",
    });
    window.addEventListener("resize", screenAdapt);
    screenAdapt();
});
onUnmounted(() => {
    window.removeEventListener("resize", screenAdapt);
});

//更换主题
const theme = computed(() => {
    return store.state.theme;
});
watch(theme, () => {
    console.log("主题切换了");
    chartInstance.dispose(); //销毁当前图表
    initChart();
    SocketService.Instance.send({
        action: "getData",
        socketType: "hotData",
        chartName: "hot",
        value: "",
    });
    screenAdapt();
    // console.log(theme.value);
});

defineExpose({
    screenAdapt,
});
</script>

<style scoped>
</style>